@charset 'utf8';

body,
html {
  position: relative;
  width: 100%;
  height: 100%;
}

// mask
.mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  z-index: 1000;
}

// login
.login-note {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -166px;
  margin-left: -180px;
  width: 360px;
  height: 332px;
  border-radius: 5px;
  background-color: #fff;

  >.note-top {
    position: relative;
    width: 100%;
    height: 65px;
    padding-top: 30px;

    >div {
      float: left;
      position: relative;
      width: 82px;
      height: 25px;
      font-size: 20px;
      padding-bottom: 4px;
      margin-left: 60px;
      color: black;
      cursor: pointer;

      &:hover {
        color: #36b447;
      }
    }

    .active {
      padding-bottom: 30px;
      color: #36b447;
      border-bottom: 1px solid #36b447;
    }

    >span {
      display: inline-block;
      position: absolute;
      top: 40px;
      left: 154px;
      width: 1px;
      height: 16px;
      margin: 0 16px;
      border-right: 1px solid black;
    }

    >span:nth-of-type(2) {
      position: absolute;
      top: 0px;
      left: 310px;
      border: none;
      font-weight: 700;
      cursor: pointer;

      &:hover {
        color: rgb(154, 154, 154);
      }
    }

    >div:last-child {
      float: right;
      margin-right: 38px;
      width: 116px;
      height: 25px;
      // border: 1px solid black;
    }
  }

  >.note-bottom {
    width: 100%;
    height: 267px;
    padding-top: 30px;
    padding-bottom: 40px;


    >div {
      position: relative;
      width: 300px;
      height: 197px;
      margin: 0 auto;

      >.phone {
        width: 100%;
        height: 42px;
        margin-bottom: 20px;

        >input {
          width: 300px;
          height: 42px;
          margin: 0 auto;
          padding: 10px;
          font-size: 14px;
          outline: none;
          border: 1px solid #ddd;


          &:focus {
            border-color: #36b447;
          }
        }
      }

      >.code {
        width: 298px;
        height: 42px;
        margin: 0 auto;
        margin-bottom: 20px;

        >input {
          display: inline-block;
          width: 300px;
          height: 42px;
          margin: 0 auto;
          padding: 10px;
          font-size: 14px;
          outline: none;
          border: 1px solid #ddd;

          &:focus {
            border-color: #36b447;
          }
        }
      }

      >span {
        display: inline-block;
        position: absolute;
        top: 63px;
        right: 0px;
        width: 121px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #36b447;
        background-color: #fafafa;
        cursor: pointer;
      }

      >.enter{
        width: 100%;
        height: 42px;

        >input{
          width: 100%;
          height: 100%;
          font-size: 18px;
          color: #fff;
          text-align: center;
          background-color: #36b447;
          cursor: pointer;
          outline: none;
          border: 1px solid #ddd;
          user-select: none;
        }
      }
      .login-text{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        width: 100%;
        height: 21px;

        a{
          font-size: 14px;
          text-decoration: none;

          &:hover{
            color: #36b447;
          }
        }
      }
    }
  }
}

.login-360{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -166px;
  margin-left: -180px;
  width: 360px;
  height: 332px;
  border-radius: 5px;
  background-color: #fff;

  >.note-top {
    position: relative;
    width: 100%;
    height: 65px;
    padding-top: 30px;

    >div {
      float: left;
      position: relative;
      width: 82px;
      height: 25px;
      font-size: 20px;
      padding-bottom: 4px;
      margin-left: 60px;
      color: black;
      cursor: pointer;

      &:hover {
        color: #36b447;
      }
    }

    
    >span {
      display: inline-block;
      position: absolute;
      top: 40px;
      left: 154px;
      width: 1px;
      height: 16px;
      margin: 0 16px;
      border-right: 1px solid black;
    }
    
    >span:nth-of-type(2) {
      position: absolute;
      top: 0px;
      left: 310px;
      border: none;
      font-weight: 700;
      cursor: pointer;

      &:hover {
        color: rgb(154, 154, 154);
      }
      }
      >div:last-child {
        float: right;
        margin-right: 36px;
        width: 118px;
        height: 25px;
        // border: 1px solid black;
      }
    .active {
      padding-bottom: 30px;
      color: #36b447;
      border-bottom: 1px solid #36b447;
    }
  }
  >.note-bottom {
    width: 100%;
    height: 267px;
    padding-top: 30px;
    padding-bottom: 40px;


    >div {
      position: relative;
      width: 300px;
      height: 197px;
      margin: 0 auto;

      >.phone-email {
        width: 100%;
        height: 42px;
        margin-bottom: 20px;

        >input {
          width: 300px;
          height: 42px;
          margin: 0 auto;
          padding: 10px;
          font-size: 14px;
          outline: none;
          border: 1px solid #ddd;


          &:focus {
            border-color: #36b447;
          }
        }
      }

      >.password {
        width: 298px;
        height: 42px;
        margin: 0 auto;
        margin-bottom: 20px;

        >input {
          display: inline-block;
          width: 300px;
          height: 42px;
          margin: 0 auto;
          padding: 10px;
          font-size: 14px;
          outline: none;
          border: 1px solid #ddd;

          &:focus {
            border-color: #36b447;
          }
        }
      }
      >.enter{
        width: 100%;
        height: 42px;

        >input{
          width: 100%;
          height: 100%;
          font-size: 18px;
          color: #fff;
          text-align: center;
          background-color: #36b447;
          cursor: pointer;
          outline: none;
          border: 1px solid #ddd;
          user-select: none;
        }
      }
    }
    .login-text{
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      width: 100%;
      height: 21px;

      a{
        font-size: 14px;
        text-decoration: none;

        &:hover{
          color: #36b447;
        }
      }
    }

  }
}

// register
.register{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -242px;
  margin-left: -225px;
  width: 450px;
  height: 484px;
  background-color: #fff;
  z-index: 10;


  >.register-top{
    position: relative;
    width: 100%;
    height: 65px;

    >div{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 25px;
      font-size: 20px;
      color: #36b447;
      text-align: center;
      line-height: 25px;
    }
    >span{
      position: absolute;
      top: 0;
      right: 8px;
      font-weight: 700;
      cursor: pointer;

      &:hover {
        color: rgb(154, 154, 154);
      }
    }
  }
  >.register-bottom{
    width: 100%;
    height: 420px;
    padding-top: 30px;
    padding-bottom: 40px;

    
    >.register-bottom-t{
      width: 330px;
      height: 228px;
      margin: 0 auto;
      margin-bottom: 20px;
      
      >div{
        width: 100%;
        height: 42px;
        margin-bottom: 20px;

        >input{
          width: 100%;
          height: 100%;
          outline: none;
          font-size: 14px;
          padding-left: 40px;
          border: 1px solid #ddd;

          &:focus{
            border-color: #36b447;
          }
        }
      }

      >div:nth-child(2){
        width: 100%;
        height: 42px;
        margin-bottom: 20px;

        >input{
          width: 156px;
          height: 42px;
        }
        >img{
          width: 102px;
          height: 42px;
          vertical-align: bottom;
          margin-left: 10px;
          border: 1px solid #ddd;
        }
        >span{
          float: right;
          width: 42px;
          height: 42px;
          font-size: 14px;
          color: #36b447;
          line-height: 42px;
          text-align: center;
          cursor: pointer;
        }
      }
      >div:nth-child(3){
        position: relative;
        width: 100%;
        height: 42px;
        margin-bottom: 20px;

        >span{
          position: absolute;
          right: 1px;
          top: 1px;
          width: 120px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          color: #36b447;
          cursor: pointer;
          background-color: #fafafa;
        }
      }
      >div:nth-child(4){
        width: 100%;
        height: 42px;
      }
    }

    >.register-bottom-b{
      width: 330px;
      margin: 0 auto; 
        >div{
          width: 346px;
          height: 18px;
          font-size: 12px;
          line-height: 18px;

          >input{
            margin-bottom: 5px;
            vertical-align: middle;
          }

          >a{
            color: #36b447;
          }
        }

        >div:nth-child(2){
          margin-bottom: 20px;
          width: 100%;
          height: 42px;
          margin-top: 10px;
          
          >input{
            width: 100%;
            height: 100%;
            background-color: #36b447;
            border: none;
            font-size: 18px;
            color: #fff;
          }
        }

        >span{
          display: block;
          text-align: right;
          width: 330px;
          height: 21px;
          font-size: 14px;

          >a{
            color: #36b447;
            text-decoration: none ;
          }
        }
    }
  }
}